﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        /*背景图*/
        body {
            background-image: url('../Image/9.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }

        .* {
            margin: 0px auto;
            padding: 0px;
        }
        .row span img, input, a {
            float: left;
        }
        #head {
            width: 100%;
            height: 10%;
        }
            /*大导航*/
            #head span img, input {
                margin-right: 2%;
            }

            #head span a {
                margin-left: 10%;
                font-size: 30px;
                text-decoration: none;
                color: black;
            }
        /*小导航*/
        .nav li {
            float: left;
            margin-right: 17%;
            list-style: none;
        }

            .nav li a {
                text-decoration: none;
                color: black;
            }
        /* 重置按钮默认样式 */
        button {
            border: none; /* 去掉边框 */
            outline: none;
            cursor: pointer;
        }

        #fancyButton {
            padding: 8px 20px;
            font-size: 16px;
            border: none;
            border-radius: 15px;
            /* 采用和背景类似的淡蓝色系渐变，并且透明度稍作调整，让按钮更融合 */
            background: linear-gradient(135deg, rgba(138, 194, 221, 0.7), rgba(215, 238, 247, 0.7));
            color: #333;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }

            #fancyButton::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 1;
            }

            #fancyButton:hover::before {
                opacity: 1;
            }

            #fancyButton:hover {
                transform: translateY(-2px);
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            }
        /* 轮播容器 */

                .carousel {
            position: relative;
            max-width: 1000px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* 图片容器 */
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        /* 单张轮播项 */
        .carousel-item {
            min-width: 100%;
            height: 400px;
            position: relative;
        }

            /* 轮播图片 */
            .carousel-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        /* 导航按钮 */
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            color: white;
            padding: 15px;
            border: none;
            cursor: pointer;
            font-size: 24px;
            transition: 0.3s;
        }

            .carousel-control:hover {
                background: rgba(0,0,0,0.8);
            }

        .prev {
            left: 0;
            border-radius: 0 5px 5px 0;
        }

        .next {
            right: 0;
            border-radius: 5px 0 0 5px;
        }

        /* 指示点 */
        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }

            .indicator.active {
                background: white;
                transform: scale(1.2);
            }
        /*栅格*/
        .container {
            width: 100%;
            max-width: 1200px; /* 最大容器宽度 */
            margin: 0 auto; /* 居中 */
            padding: 0 15px; /* 左右留白 */
            box-sizing: border-box;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(12, 1fr); /* 12列栅格 */
            gap: 20px; /* 列间距 */
            margin: 20px 0; /* 行间距 */
        }

        /* 通用列样式 */
        [class^="col-"] {
            grid-column-end: span 12; /* 默认占满整行 */
            box-sizing: border-box;
            padding: 15px;
            background-clip: content-box; /* 背景不延伸到padding */
        }

        /* 栅格列定义 */
        .col-1 {
            grid-column-end: span 1;
        }

        .col-2 {
            grid-column-end: span 2;
        }

        .col-3 {
            grid-column-end: span 3;
        }

        .col-4 {
            grid-column-end: span 4;
        }

        .col-5 {
            grid-column-end: span 5;
        }

        .col-6 {
            grid-column-end: span 6;
        }

        .col-7 {
            grid-column-end: span 7;
        }

        .col-8 {
            grid-column-end: span 8;
        }

        .col-9 {
            grid-column-end: span 9;
        }

        .col-10 {
            grid-column-end: span 10;
        }

        .col-11 {
            grid-column-end: span 11;
        }

        .col-12 {
            grid-column-end: span 12;
        }

        /* 响应式设计 */
        @@media (max-width: 1200px) {
            .container {
                max-width: 960px;
            }
        }

        @@media (max-width: 992px) {
            .container {
                max-width: 720px;
            }

            .nav li {
                margin-right: 14%;
            }
            /* 平板设备调整 */
            .col-md-1 {
                grid-column-end: span 1;
            }

            .col-md-2 {
                grid-column-end: span 2;
            }
            /* ... 其他列定义类似 */
            .col-md-12 {
                grid-column-end: span 12;
            }
        }

        @@media (max-width: 992px) {
            .container {
                max-width: 100%;
                padding: 0 10px;
            }
            /* 手机设备调整 */
            .row {
                grid-template-columns: 1fr; /* 单列布局 */
                gap: 15px;
            }

            [class^="col-"] {
                grid-column-end: span 1; /* 强制单列 */
            }
        }

        /* 可选：Flexbox备用方案（如需支持旧浏览器） */
        .flex-row {
            display: flex;
            flex-wrap: wrap;
            margin: -10px; /* 抵消子元素margin */
        }

        .flex-col {
            padding: 10px;
            box-sizing: border-box;
        }

        /* 其他辅助类 */
        .offset-1 {
            margin-left: 8.3333%;
        }

        .offset-2 {
            margin-left: 16.6666%;
        }

        .left {
            width: 4%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="head" class="col-12 col-md-6 col-lg-4">
                <span>
                    <img class="left" src="~/Image/logo.png" />
                    <input class="right" type="text" style="width:600px;border-radius:100px;height:30px;" name="name" value="" />
                    <input type="button"  id="fancyButton"  name="name" value="搜索" />
                </span>
                <span>
                    <input  id="fancyButton"  type="button" name="name" value="个人" onclick="Usersinfo()"/>
                    <a href="@Url.Action("Create","home")">创作⊕</a>
                </span>
            </div>
        </div>
    </div>

    <div class="center_one">
        <ul class="nav col-12 col-md-6 col-lg-4">
            <li><a href="@Url.Action("Index","Default")">全部</a></li>
            <li><a href="@Url.Action("Art","Default")">艺术</a></li>
            <li><a href="@Url.Action("WX","Default")">文学</a></li>
            <li><a href="@Url.Action("Sports","Default")">体育</a></li>
            <li><a href="@Url.Action("Life","Default")">生活</a></li>

        </ul>
    </div>
    <br />
    <div class="center_image col-12 col-md-12 col-lg-4">
        <!-- 轮播容器 -->
        <div class="carousel">
            <!-- 图片容器 -->
            <div class="carousel-inner">
                <!-- 轮播项 -->
                <div class="carousel-item active">
                    <img src="../Image/dance.jpg" alt="Alternate Text" />
                </div>
                <div class="carousel-item">
                    <img src="../Image/Life.jpg" alt="Alternate Text" />
                </div>
                <div class="carousel-item">
                    <img src="../Image/Pe.jpg" alt="Alternate Text" />
                </div>
                <div class="carousel-item">
                    <img src="../Image/Wx.jpg" alt="Alternate Text" />
                </div>
            </div>

            <!-- 导航按钮 -->
            <button class="carousel-control prev">❮</button>
            <button class="carousel-control next">❯</button>

            <!-- 指示点 -->
            <div class="carousel-indicators">
                <button class="indicator active"></button>
                <button class="indicator"></button>
                <button class="indicator"></button>
            </div>
        </div>
    </div>

</body>
</html>
<script>
    // 轮播逻辑
    const carouselInner = document.querySelector('.carousel-inner');
    const items = document.querySelectorAll('.carousel-item');
    const indicators = document.querySelectorAll('.indicator');
    let currentIndex = 0;
    let autoPlay = true;
    let interval = 3000; // 自动播放间隔（3秒）

    // 切换轮播项
    function goToIndex(index) {
        if (index >= items.length) index = 0;
        if (index < 0) index = items.length - 1;

        carouselInner.style.transform = `translateX(-${index * 100}%)`;
        indicators.forEach(i => i.classList.remove('active'));
        indicators[index].classList.add('active');
        currentIndex = index;
    }

    // 自动播放
    let timer = setInterval(() => {
        if (autoPlay) goToIndex(currentIndex + 1);
    }, interval);

    // 按钮点击事件
    document.querySelector('.prev').addEventListener('click', () => {
        goToIndex(currentIndex - 1);
    });

    document.querySelector('.next').addEventListener('click', () => {
        goToIndex(currentIndex + 1);
    });

    // 指示点点击事件
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => goToIndex(index));
    });

    // 鼠标悬停暂停
    carouselInner.parentElement.addEventListener('mouseenter', () => {
        autoPlay = false;
    });

    carouselInner.parentElement.addEventListener('mouseleave', () => {
        autoPlay = true;
    });
    function Usersinfo() {
    var users ='@Url.Action("Person","Home")';
    window.location.href = users;
}
</script>
